<template>
  <div class="set_container">
    <span class="title">Account Settings</span>
    <div class="flex_row pd-24">
      <div
        @click="changTab(item)"
        :class="[
          'tab_item',
          'cursor_poi',
          item.name === activeTab ? 'active_tab_item' : 'tab_item',
        ]"
        v-for="item in list"
        :key="item.id">
        {{ item.name }}
      </div>
    </div>

    <Notifications v-if="activeTab === 'Notifications'" />
    <AccountActions v-else-if="activeTab === 'AccountActions'" />
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref } from 'vue';
  import AccountActions from '@/views/user/components/AccountActions.vue';
  import Notifications from '@/views/user/components/Notifications.vue';

  const list = ref<any>([
    { id: '1', name: 'Notifications' },
    // { id: '2', name: 'AccountActions' },
  ]);
  const activeTab = ref<string>('Notifications');

  const changTab = (item: any) => {
    activeTab.value = item.name;
  };
</script>

<style scoped lang="scss">
  .set_container {
    width: 100%;
    height: 100vh;
    background: #fff;
    padding: 24px;
    .flex_row {
      display: flex;
      flex-direction: row;
    }
    .cursor_poi {
      cursor: pointer;
    }
    .tab_item {
      color: #7a7a7a;
      font-size: 15px;
      font-weight: 500;
      margin-right: 40px;
      border-bottom: 2px solid #fff;
      padding-bottom: 11px;
      line-height: normal;
    }
    .active_tab_item {
      color: #f76b1b;
      font-size: 15px;
      font-weight: 500;
      margin-right: 40px;
      border-bottom: 2px solid #f76b1b;
      padding-bottom: 11px;
      line-height: normal;
    }
    .pd-24 {
      padding-top: 24px;
    }
    .title {
      color: #222;
      font-size: 20px;
      font-weight: 600;
    }
  }
</style>
